<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鸡兔同笼问题计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .container {
            width: 60%;
            margin: 0 auto;
            background-color: aqua;
            min-height: 220px;
            padding: 20px;
        }
        h2 {
            text-align: center;
            padding-top: 10px;
        }
        .input-group {
            margin-bottom: 20px;
            text-align: center;
        }
        .input-group label {
            display: block;
            margin-bottom: 5px;
        }
        .input-group input {
            box-sizing: border-box;
            width: 60px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            text-align: center;
        }
        .input-number-control {
            display: inline-block;
            vertical-align: middle;
        }
        .input-number-control button {
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f2f2f2;
            cursor: pointer;
        }
        .result {
            margin: 20px auto;
            height: 40px;
            width: 75%;
            padding: 20px;
            border: 1px dotted goldenrod;
            background-color: rgb(221,220,220);
            font-weight: bold;
            text-align: center;
        }
        .result.success {
            color: green;
        }
        .result.failure {
            color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>循环解决鸡兔同笼问题</h2>
        <span class="input-group">
            <label for="totalAnimals"></label>
            鸡兔一共<div class="input-number-control">
                <input type="number" id="totalAnimals" value="35" min="1">
            </div>
            只
        </span>
        <span class="input-group">
            <label for="totalLegs"></label>
            笼子里脚一共<ds class="input-number-control">
                <input type="number" id="totalLegs" value="94" min="2">
            </span>
            只
        </s>
        <button onclick="solveProblem()">计算</button>
        <div class="result" id="result"></div>
    </div>

    <script>
        function solveProblem() {
            var totalAnimals = parseInt(document.getElementById('totalAnimals').value);
            var totalLegs = parseInt(document.getElementById('totalLegs').value);
            var resultDiv = document.getElementById('result');
            var resultText = '';

            for (var chickens = 0; chickens <= totalAnimals; chickens++) {
                var rabbits = totalAnimals - chickens;
                if (chickens * 2 + rabbits * 4 === totalLegs) {
                    resultText = `分别有鸡${chickens}只，有兔子${rabbits}只`;
                    resultDiv.className = 'result success';
                    resultDiv.textContent = resultText;
                    return;
                }
            }

            resultText = '无解';
            resultDiv.className = 'result failure';
            resultDiv.textContent = resultText;
        }
    </script>
</body>
</html>